<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">{{ content }}</div>

        <div class="panel-body">
            <form id="form" class="form-horizontal">
                {% for field in form_obj %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}" class="col-sm-3 control-label">{{ field.label }}</label>
                        <div class="col-sm-5">{{ field }} {{ field.errors.0 }}</div>
                    </div>
                {% endfor %}
                <div>
                    <label for="" class="col-sm-3"></label>
                    <button id="sub" class="btn btn-success btn-lg">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>


<script src="/static/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/jquery.cookie.js"></script>

<script>
    $("#sub").on("click", function () {
        $.ajax({
            url: "{% url 'web2:bookAdd' %}",
            type: "post",
            async : false,
            dataType: 'JSON',
            headers: {"X-CSRFToken": $.cookie("csrftoken")},
            data: $('#form').serialize(),
            success: function (data) {
                if (data["status"]) {
                    console.log(data["url"]);
                    {#window.location.href = "http://127.0.0.1:8001/web2/bookList/";#}
                    location.href = data["url"]
                } else {
                    console.log(data["errors"])
                }
            },
        });
        return false;
    })

</script>

</body>
</html>